<div class="auth-container">
  <div class="card auth-card">
    <div class="card-body">
      <h2 class="text-center mb-4">登录</h2>

      <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
        <!-- 用户名输入 -->
        <div class="form-group">
          <label for="username">用户名</label>
          <input type="text" id="username" class="form-control"
                 formControlName="username"
                 [ngClass]="{ 'is-invalid': submitted && usernameControl.invalid }">
          <div *ngIf="submitted && usernameControl.invalid" class="invalid-feedback">
            <div *ngIf="usernameControl.hasError('required')">用户名不能为空</div>
          </div>
        </div>

        <!-- 密码输入 -->
        <div class="form-group">
          <label for="password">密码</label>
          <input type="password" id="password" class="form-control"
                 formControlName="password"
                 [ngClass]="{ 'is-invalid': submitted && passwordControl.invalid }">
          <div *ngIf="submitted && passwordControl.invalid" class="invalid-feedback">
            <div *ngIf="passwordControl.hasError('required')">密码不能为空</div>
          </div>
        </div>

        <!-- 记住我 -->
        <div class="form-group form-check">
          <input type="checkbox" id="remember" class="form-check-input" formControlName="remember">
          <label for="remember" class="form-check-label">记住我</label>
        </div>

        <!-- 提交按钮 -->
        <button type="submit" class="btn btn-primary btn-block" [disabled]="loading">
          <span *ngIf="!loading">登录</span>
          <span *ngIf="loading" class="spinner-border spinner-border-sm"></span>
        </button>
      </form>

      <div class="text-center mt-3">
        <a routerLink="/register">还没有账号？立即注册</a>
      </div>
    </div>
  </div>
</div>
